<template>
  <div class="app-container">
    <div style="padding:20px;">
      <!-- 查询 -->
      <div class="filter-container">
        <el-form :inline="true" class="search-form" label-width="100px">
          <el-row style="display: flex; flex-wrap: wrap">
            <div style="flex: 1">
              <el-form-item label="创建时间区间" style="margin: 5px 0">
                <el-date-picker
                  v-model="timeArr"
                  type="datetimerange"
                  @change="timeArrWay"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                  clearable
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="会员卡名称" style="margin: 5px 0">
                <el-input
                  v-model="searchForm.card_name"
                  placeholder="请输入会员卡名称"
                  clearable
                  show-word-limit
                />
              </el-form-item>
              <el-form-item label="状态" style="margin: 5px 0">
                <el-select
                  clearable
                  v-model="searchForm.status"
                  placeholder="请选择状态"
                >
                  <el-option
                    v-for="item in [
                      { name: '上架', id: 1 },
                      { name: '下架', id: 2 },
                    ]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="getListWay"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resetting"
                  >重置</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-divider></el-divider>
    <div style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-button
              @click="pathWay('/finance/vipcard/save')"
              icon="el-icon-circle-plus-outline"
              type="primary"
              >添加会员卡</el-button
            >
          </el-col>
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button
                class=""
                icon="el-icon-refresh"
                size="mini"
                @click="resetting"
              ></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button
                    class=""
                    icon="el-icon-s-operation"
                    size="mini"
                  ></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-table
          highlight-current-row
          :data="dataList"
          :header-cell-style="{
            'background-color': '#f3f8fe',
            color: '#606266',
            height: '50px',
          }"
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column
            v-for="fruit in tableThead"
            :key="fruit"
            :label="tableTheadOptions[fruit].label"
            min-width="80"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="fruit == 'status'">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="2"
                  @change="eidtStatusWay(scope.row)"
                />
              </div>
              <div v-else-if="fruit == 'explain'">
                <el-button
                  type="primary"
                  @click="explainDialogWay(scope.row)"
                  size="mini"
                  >查看说明</el-button
                >
              </div>
              <div v-else-if="fruit == 'goods_type'">
                <el-tag v-if="scope.row.goods_type == 1">全平台商品</el-tag>
                <el-tag v-if="scope.row.goods_type == 2">平台自营商品 </el-tag>
                <el-tag v-if="scope.row.goods_type == 3">指定店铺</el-tag>
                <el-tag v-if="scope.row.goods_type == 4">指定商品</el-tag>
              </div>
              <span v-else>
                {{ scope.row[fruit] }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            width="200"
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <!-- <el-button
                @click="detailsWay(scope.row.id)"
                style="margin: 5px"
                type="primary"
                size="mini"
              >
                详情
              </el-button> -->
              <el-button
                @click="pathWay('/finance/vipcard/save?id=' + scope.row.id)"
                style="margin: 5px"
                type="primary"
                size="mini"
              >
                编辑
              </el-button>
              <el-popconfirm
                title="确定要删除该数据吗？"
                @confirm="deleteWay(scope.row)"
              >
                <el-button
                  style="margin-left: 10px"
                  type="danger"
                  size="mini"
                  slot="reference"
                >
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row style="text-align: right">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.pageSize"
          @pagination="getListWay"
        />
      </el-row>
    </div>

    <el-dialog title="会员卡说明" :visible.sync="explainDialog" width="500px">
      <div
        id="phone"
        style="
          width: 275px;
          height: 555px;
          border: 2px solid rgb(59, 59, 59);
          border-radius: 30px;
          margin: 10px auto;
          background: rgb(46, 46, 46);
        "
      >
        <div
          class="tingtong"
          style="
            width: 120px;
            height: 8px;
            border: 2px solid rgb(80, 80, 80);
            background: rgb(26, 26, 26);
            border-radius: 10px;
            margin: 6px auto;
          "
        ></div>
        <div
          class="screen"
          style="
            height: 508px;
            width: 260px;
            background: #ffffff;
            border: 1px solid rgb(28, 28, 28);
            margin: 6px auto;
            padding: 5px;
          "
        >
          <el-scrollbar wrap-style="overflow-x:hidden;" style="height: 498px">
            <div v-html="explain"></div>
          </el-scrollbar>
        </div>
        <div
          class="btn"
          style="
            width: 70px;
            height: 17px;
            background: rgb(26, 26, 26);
            border-radius: 30px;
            margin: -2px auto;
          "
        ></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="explainDialog = false">取 消</el-button>
        <el-button type="primary" @click="explainDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-drawer size="700px" title="会员卡信息" :visible.sync="detailsDialog">
      <el-row style="padding: 0 30px">
        <el-descriptions :column="3" border>
          <el-descriptions-item>
            <template slot="label"> 会员卡名称 </template>
            {{ detailsObj.card_name ? detailsObj.card_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 手机号 </template>
            18100000000
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 居住地 </template>
            苏州市
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 备注 </template>
            <el-tag size="small">学校</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 联系地址 </template>
            江苏省苏州市吴中区吴中大道 1188 号
          </el-descriptions-item>
        </el-descriptions>
      </el-row>
    </el-drawer>
  </div>
</template>

  <script>
import {
  getClubCardList,
  SaveClubCard,
  getClubCardInfo,
  SaveClubCardStatus,
  delClubCardStatus,
} from "@/api/finance/index";
const tableTheadOption = {
  id: {
    label: "ID",
    field: "id",
  },
  created_at: {
    label: "创建时间",
    field: "created_at",
  },
  card_name: {
    label: "会员卡名称",
    field: "card_name",
  },
  card_colour: {
    label: "会员卡颜色",
    field: "card_colour",
  },
  goods_type: {
    label: "折扣限制类型",
    field: "goods_type",
  },
  explain: {
    label: "会员卡说明",
    field: "explain",
  },
  status: {
    label: "状态",
    field: "status",
  },
};
const allTableThead = [
  "id",
  "created_at",
  "card_name",
  "card_colour",
  "goods_type",
  "explain",
  "status",
];
const defaultTableThead = [
  "created_at",
  "card_name",
  "card_colour",
  "goods_type",
  "explain",
  "status",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      searchForm: {
        card_name: "",
        status: "",
        start_time: "",
        end_time: "",
        count: 10,
        page: 1,
      },
      loading: true,
      timeArr: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dataList: [],
      total: 0,
      explain: "",
      explainDialog: false,
      detailsDialog: false,
      detailsloading: false,
      detailsObj: {},
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    getListWay() {
      this.loading = true;
      getClubCardList(this.searchForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.loading = false;
          return this.$messages.error(res.msg);
        }
        this.loading = false;
        this.dataList = res.data.list;
        this.total = res.data.total;
      });
    },
    resetting() {
      this.searchForm = {
        card_name: "",
        status: "",
        start_time: "",
        end_time: "",
      };
      this.getListWay();
    },
    eidtStatusWay(row) {
      this.loading = true;
      SaveClubCardStatus({ id: row.id, status: row.status })
        .then((res) => {
          this.loading = false;
          if (res.code !== 200 || res.status !== 1) {
            this.getListWay();
            this.$messages.error(res.msg);
            return;
          }
          this.$messages.success("修改成功");
          this.getListWay();
        })
        .catch(() => {
          this.loading = false;
          this.$messages.error("修改失败");
          this.getListWay();
        });
    },
    timeArrWay(val) {
      if (val.length !== 0) {
        this.searchForm.start_time = val[0];
        this.searchForm.end_time = val[1];
      } else {
        this.searchForm.start_time = "";
        this.searchForm.end_time = "";
      }
    },
    deleteWay(row) {
      this.loading = true;
      delClubCardStatus({ id: row.id })
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.$messages.success("删除成功");
          this.getListWay();
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    explainDialogWay(row) {
      this.explain = row.explain;
      this.explainDialog = true;
    },
    detailsWay(row) {
      console.log(row);
      this.detailsDialog = true;
      this.detailsloading = true;
      getClubCardInfo({ id: row }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.detailsObj = res.data;
        console.log(this.detailsObj);
        this.detailsloading = false;
      });
    },
    pathWay(url) {
      this.$router.push(url);
    },
  },
};
</script>

  <style>
</style>
